<template>
  <div class="page-hire-comment">
    <van-rate v-model="form.star" :size="40"/>

    <div class="labels">
      <van-checkbox-group v-model="form.label">
      <van-checkbox
        v-for="item in options"
        :key="item"
        :name="item"
      >
        {{ item }}
      </van-checkbox>
    </van-checkbox-group>
    </div>
    <div class="textarea">
      <textarea v-model="form.content" placeholder="请写下您对该设计师的更多评价（可不填）" rows="4"></textarea>
    </div>

    <div class="btn-submit">
      <van-button type="primary" block @click="onSubmit">提交</van-button>
    </div>
  </div>
</template>

<script>
import { commentAdd } from '../../api/comment'
export default {
  name: 'comment',
  props: {
    orderId: String
  },
  data(){
    return{
      options: ['服务态度好', '有创意/美感', '沟通流畅', '接单及时'],
      form: {
        content: '',
        label: [],
        orderId: '',
        star: 0
      }
    }
  },
  methods: {
    onSubmit(){
      commentAdd(this.form).then(rsp => {
        if(rsp.code === 200){
          this.$toast.success('评价成功')
          this.$router.replace({name: 'hireOrder'})
        }
      })
    }
  },
  created(){
    this.form.orderId = this.orderId
  }
}
</script>

<style lang="less">
.page-hire-comment{
  .van-rate{
    padding: 50px;
    text-align: center;
  }
  .labels{
    padding: 20px;
    // text-align: center;
    .van-checkbox{
      display: inline-block;
      padding: 10px;
      .van-checkbox__icon{
        
        &.van-checkbox__icon--checked{

        }
      }
      .van-checkbox__label{
        // height: auto;
        // line-height: inherit;
        // display: inline-block;
        // padding: 10px;
      }
    }
  }
  .textarea{
    padding: 20px;
    textarea{
      display: block;
      width: 100%;
      padding: 15px 20px;
      line-height: 1.8;
      font-size: 14px;
    }
  }
  .btn-submit{
    padding: 20px;
  }
}
</style>
